<template>
  <div class="shareInfo">
    <!-- 导航组件绑定回跳地址 -->
    <hmNavBar :path="repath"> </hmNavBar>
    <div class="content">
      <h3 class="title">{{ info.title }}</h3>
      <div class="other">
        <div class="o1">{{ info.updated_at | formatTime }}</div>
        <div class="iconfont o2">&#xe644;</div>
        <div class=" o3">{{ info.read }}</div>
        <div
          class="iconfont o4"
          @click="toStar"
          :class="{ red: isLogin && userInfo.starArticles.includes(+id) }"
        >
          &#xe638;
        </div>
        <div
          class="o5"
          @click="toStar"
          :class="{ red: isLogin && userInfo.starArticles.includes(+id) }"
        >
          {{ info.star }}
        </div>
      </div>
      <div class="content-html" v-html="info.content"></div>
      <!-- 评论
          上拉加载
          van-list
          v-model:boolean  true:表示正在加载 false:此次加载完成
          finished:boolean值  true:所有加载完成   false:所有加载还没完成
          finished-text:加载完成后的文本显示
          @load="滚动条离底部小于300时自动执行(v-model为false在执行过成中将v-model的值转换为true,load方法
          加载完成,需要将v-model的值转换成false 判断所有加载
          )"
        
        
        
         -->

      <!-- 评论 -->

      <div class="comment">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="已经加载完成"
          @load="load"
        >
          <h3 class="comment-title">评论 <span class="num"> 87</span></h3>
          <div
            class="comment-item"
            v-for="(item, index) in commentList"
            :key="index"
          >
            <div class="comment-top">
              <img
                v-if="item.author.avatar"
                :src="baseUrl + item.author.avatar"
                alt=""
                class="c1"
                @click="reComment(item.id)"
              />
              <!-- 在图片上加入点击事件,并传入实参id -->
              <img
                @click="reComment(item.id)"
                v-else
                src="@/assets/logo.png"
                alt=""
                class="c1"
              />
              <div class="c2">
                <div class="c2-top">{{ item.author.nickname }}</div>
                <div class="c2-bottom">{{ item.created_at | formatTime }}</div>
              </div>
              <div>{{ item.star }}</div>
              <!-- 在评论点赞上绑定相应的方法与class -->
              <i
                class="iconfont"
                @click="toCommentStar(item)"
                :class="{
                  red: commentStar(item.id)
                }"
                >&#xe638;
              </i>
            </div>
            <div class="comment-middle">
              {{ item.content }}
            </div>
            <div
              class="comment-bottom"
              v-if="item.children_comments.length > 0"
            >
              <div
                class="comment-bottom-item"
                v-for="(item2, index2) in item.children_comments"
                :key="index2"
              >
                <span class="left">{{ item2.author }}:</span>
                <span class="right"> {{ item2.content }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>

      <!-- 工具栏 -->
      <div class="tool">
        <div class="t1" @click="shoreComment">
          <!-- 绑定方法发表文章评论 -->
          我来补充两句
        </div>
        <!-- 判断用户信息中文章收藏数组是否包含当前文章Id(注意:需将文章id转成number) -->
        <div
          class="t2"
          :class="{ red: $store.getters.getCollect(+id) }"
          @click="toCollect"
        >
          <div class="iconfont">&#xe63c;</div>
          <div class="num">{{ info.collect }}</div>
        </div>

        <div
          class="t2"
          @click="toStar"
          :class="{ red: isLogin && userInfo.starArticles.includes(+id) }"
        >
          <div class="iconfont">&#xe638;</div>
          <div class="num">{{ info.star }}</div>
        </div>
        <div class="t2">
          <div class="iconfont">&#xe63e;</div>
          <div class="num">{{ info.share }}</div>
        </div>
      </div>

      <!-- 跳出弹窗
        van-popup
            v-model="控制是否显示"
            position:显示的位置     
            el-input
               type="textarea"
               rows="5" 

           van-field
            type="textarea"
            rows="5"
            v-model="双向绑定"
       -->
      <!-- 评论弹窗布局 -->
      <van-popup v-model="isShow" position="bottom">
        <div class="send">
          <van-field
            class="field"
            v-model="fieldValue"
            type="textarea"
            rows="4"
            placeholder="我来补充二句"
          >
          </van-field>
          <div class="send-btn" @click="send">发送</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  articlesShareInfo,
  articlesComments,
  articlesCollect,
  articlesStar,
  sendArticlesComments,
  articleCommentsStar
} from '@/api/find.js'
import { mapState } from 'vuex'
export default {
  computed: {
    /* 导入登录状态与用户信息 */
    ...mapState(['userInfo', 'isLogin']),
    /* 通过计算属性传参处理了一个评论点赞class的处理 */
    commentStar () {
      return id => {
        return this.isLogin && this.userInfo.starComments.includes(+id)
      }
    }
  },
  data () {
    return {
      id: this.$route.params.id,
      /* 接收路由传值repath回跳地址 */
      repath: this.$route.query.repath,
      info: '',
      baseUrl: process.env.VUE_APP_URL,
      commentList: [], //评论数据
      loading: false,
      finished: false,
      currentPage: 0,
      pageSize: 5,
      isShow: false, //弹窗是否
      fieldValue: '', //评论框文本内容
      parent: '' //没有id就是发表评论,有id就是回复评论
    }
  },
  async created () {
    const res = await articlesShareInfo(this.id)
    this.info = res.data.data
  },
  methods: {
    async load () {
      this.currentPage++
      const _q = {
        start: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize
      }
      const res2 = await articlesComments(this.id, _q)
      this.commentList.push(...res2.data.data.list)
      this.loading = false
      if (this.commentList.length >= res2.data.data.total) {
        //是否加载完成判断
        this.finished = true
      }
      // window.console.log('文章详情', res)
      window.console.log('文章评论', res2)
    },
    /* 文章评论 */
    shoreComment () {
      //处理发表文件评论parent修改为空,同时显示弹窗
      this.parent = ''
      this.isShow = true
    },
    /* 点击头像回复评论 */
    reComment (id) {
      //处理回复评论 this.parent=刚传入的实参id,同时显示弹窗
      this.parent = id
      this.isShow = true
    },

    /* 发送评论 */
    async send () {
      const res = await sendArticlesComments({
        content: this.fieldValue, //发送框的v-model值
        article: this.id, //文章id
        parent: this.parent //回复评论的id parent有值就是回复评论,没有值就是文章评论
      })
      this.$toast.success('发表评论成功!')
      /* 关闭弹窗 */
      this.isShow = false
      /* 发表评论完成后,如果是文章评论,直接添加数据到数组第一项 */
      if (this.parent === '') {
        this.commentList.unshift(res.data.data) //人为将评论添加到最前面,先不要接口调用
      } else {
        //如果是回复评论,需找出是哪一条回复评论,通过findIndex比较每一项的ID是否==this.parent
        /* 找出this.commentList中id==this.parent的那条评论,添加数据到回复评论  找到后,将数据添加到相应索引项的回复评论中 */
        //let _index=索引,
        //返回值=数组 findIndex((item,index)=>{
        // return boolean值 true 返回值=index})
        //})
        let _index=this.commentList.findIndex((item,index)=>{
            return item.id===this.parent //找到索引
        })
        this.commentList[_index].children_comments.push(res.data.data) //添加到回复评论中
      }
      //this.init()
      window.console.log(res)
    },

    /* 收藏文章 */
    async toCollect () {
      //收藏文章点击事件
      const res = await articlesCollect({ id: this.id }) //调用api
      window.console.log('123', res)
      if (res.data.data.list.includes(+this.id)) {
        //判断是否收藏并提示一下
        this.$toast.success('收藏成功')
      } else {
        this.$toast('取消收藏')
      }
      //更新收藏数量
      this.info.collect = res.data.data.num //更新收藏数量
      //刷新用户信息
      // this.$store.commit('setUserInfoOther', res.data.data.list) //更新收藏的数组,通过vuex还需要在vuex中定义相应方法
      /* 调用vuex方法时传参也做修改 */
      this.$store.commit('setUserInfoOther', {
        key: 'collectArticles',
        value: res.data.data.list
      })

      /* this.$store.dispatch('refreshUserInfo') */
    },

    /* 点赞文章 */
    async toStar () {
      //调用api
      const res = await articlesStar({
        article: this.id
      })
      window.console.log(res)
      if (res.data.data.list.includes(+this.id)) {
        //判断是否点赞与提示
        this.$toast.success('点赞成功')
      } else {
        this.$toast('取消点赞')
      }
      this.info.star = res.data.data.num //更新点击数量
      this.$store.commit('setUserInfoOther', {
        //更新vuex中的点击数组
        key: 'starArticles',
        value: res.data.data.list
      })
    },

    /* 点赞评论 */
    async toCommentStar (item) {
      const res = await articleCommentsStar({ id: +item.id })
      if (res.data.data.list.includes(+item.id)) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast('取消点赞')
      }
      //更新数据
      item.star = res.data.data.num
      //更新vuex
      this.$store.commit('setUserInfoOther', {
        key: 'starComments',
        value: res.data.data.list
      })
    }
  }
}
</script>

<style lang="less">
.shareInfo {
  .content {
    padding: 20px @p15;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 600;
      text-align: left;
      color: #181a39;
      line-height: 25px;
    }

    .other {
      display: flex;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #b4b4bd;
      line-height: 16px;
      letter-spacing: 0px;
      .o1 {
        flex: 1;
      }
      .o2,
      .o4 {
        margin-right: 10px;
        margin-left: 10px;
      }
    }
    .content-html {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 27px;
      letter-spacing: 0px;
      /* 需要对文章内的html内容做一些css处理
        字体方面设置,图片方面设置(/deep/处理,以免由于scoped影响没做用到)
        deep处理:v-html的内容在加入了scoped的时候是作用不上去的,通过/deep/可以穿透scoped的限制     

    */
      //   & /deep/ img {
      //     width: 100%;
      //   }
    }
  }
  /* 评论 */
  .comment {
    margin-top: 20px;
    padding-bottom: 60px;
    .comment-title {
      position: relative;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      .num {
        position: absolute;
        top: -4px;
        left: 40px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #b4b4bd;
        line-height: 16px;
        letter-spacing: 0px;
      }
    }
    .comment-item {
      padding: 15px;
      .comment-top {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #b4b4bd;
        line-height: 16px;
        letter-spacing: 0px;
        .c1 {
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }
        .c2 {
          flex: 1;
          .c2-top {
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Semibold;
            font-weight: 600;
            text-align: left;
            color: #545671;
            line-height: 16px;
            letter-spacing: 0px;
          }
          .c2-bottom {
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #b4b4bd;
            line-height: 16px;
            letter-spacing: 0px;
          }
        }
      }
      .comment-middle {
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 500;
        text-align-last: left;
        color: #181a39;
        line-height: 27px;
        letter-spacing: 0px;
      }
      .comment-bottom {
        .comment-bottom-item {
          padding: 15px @p15;
          word-break: break-all;
          width: 300px;
          background: #f7f4f5;
          border-radius: 4px;
          line-height: 20px;
          font-size: 14px;
          text-align: left;
          line-height: 20px;
          letter-spacing: 0px;
          .left {
            color: #545671;
            font-weight: 600;
          }
          .right {
            color: #75758b;
          }
        }
      }
    }
  }
  /* 工具栏 */
  .tool {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    padding: @p15;
    display: flex;
    align-items: center;
    background-color: #fff;
    .t1 {
      flex: 1;
      height: 34px;
      background-color: #f7f4f5;
      padding-left: 10px;
      font-size: 14px;
      text-align: left;
      color: #b4b4bd;
      line-height: 34px;
    }
    .t2 {
      color: #ccc;
      text-align: center;
      margin-left: 15px;
      .iconfont {
        font-size: 28px;
      }
      .num {
        font-size: 12px;
      }
    }
    .red {
      color: red !important;
    }
  }
  .send {
    padding: 15px;
    .field {
      background-color: #f7f4f5;
    }
    .send-btn {
      text-align: right;
      font-size: 14px;
      line-height: 20px;
      color: #ccc;
    }
  }
}
</style>

<style lang="less">
/* 出理方法一:可以去掉上面的scoped 方法二可以用deep ,方法三 */
.shareInfo {
  .content-html {
    img {
      width: 100%;
    }
  }
}
</style>
